<template>
  <div id="environmental" class="environmental">
    <!-- 碳排放管理 -->
    <!-- <parklist :getParkCode="parkChange"></parklist> -->
    <div>
      <div style="width:100%;margin: 30px 0px 20px 0px">
        <span style="font-size: 20px;font-weight: 500;color: #333333;line-height: 28px;">碳排放管理</span>
      </div>
      <div class="shadow" style="display:flex;background-color: #FFFFFF;padding-top:16px;">
        <!-- Tree -->
        <!-- <div class="leftTree">
          <div class="tree_title">
            <span>碳排放管理</span>
          </div>
          <div class="shadow">
            <div style="padding: 20px 0">
              <el-tree
                :data="treeData"
                :props="defaultProps"
                :highlight-current="true"
                :default-expand-all="true"
                @node-click="handleNodeClick"
                :expand-on-click-node="false"
                class="tree_sty"
                v-loading="loading.treeLoading">
              </el-tree>
            </div>
          </div>
        </div> -->
        <!-- Table -->

        <div class="rightTable">
          <div style="height: 32px;margin-bottom:16px;">
            <div class="tableSearch">
              <!-- <label>时间窗口：</label> -->
              <el-button :type="searchParams.dateWindow === '0' ? 'primary' : ''" size="small" @click="changeCarbonType('0')" style="width: 54px;margin-left:20px;">日</el-button>
              <el-button :type="searchParams.dateWindow === '1' ? 'primary' : ''" size="small" @click="changeCarbonType('1')" style="width: 54px;">月</el-button>
              <el-button :type="searchParams.dateWindow === '2' ? 'primary' : ''" size="small" @click="changeCarbonType('2')" style="width: 54px;">年</el-button>
              <!-- <el-select
                v-model="searchParams.dateWindow"
                placeholder="请选择"
                @change="changeType"
                size="small"
                class="w106 searchDay">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
              </el-select> -->
              <el-date-picker
                v-model="searchParams.searchDate"
                class="w180 searchDay"
                :format="carbonDatePickerParam.format"
                value-format="yyyy-MM-dd"
                :type="carbonDatePickerParam.type"
                size="small"
                :placeholder="carbonDatePickerParam.placeholder"
                :picker-options="pickerOption"
                :clearable="false"
                @change="searchAction"
                :editable="false"
                popper-class="report-data-picker-top">
              </el-date-picker>
              <!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="searchAction">查询报表</el-button> -->
            </div>
          </div>
          <div class="tableDiv">
            <div>
              <el-table
                :data="tableData1"
                border
                :span-method="arraySpanMethod"
                :height="352"
                :header-cell-class-name="tableHeadClassName"
                :row-class-name="tableRowClassName"
                class="table_sty"
                v-loading="loading.tableLoading">
                <el-table-column prop="no" show-overflow-tooltip align="center" label="序号" min-width="60" ></el-table-column>
                <el-table-column prop="name" show-overflow-tooltip align="center" label="排放因子数据" min-width="120" ></el-table-column>
                <el-table-column prop="monthSum" show-overflow-tooltip  align="center" label="月累计" ></el-table-column>
                <el-table-column prop="yearSum" show-overflow-tooltip  align="center" label="年累计" ></el-table-column>
                <el-table-column v-for="(item, index) in tableColumList" align="center" :key="index" min-width="120" :label="item" >
                  <template slot-scope="scope">
                  <span>{{scope.row.dayList[index]}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 空气质量 -->
    <div style="width:100%;margin: 30px 0px 20px 0px">
      <span style="font-size: 20px;font-weight: 500;color: #333333;line-height: 28px;">空气质量</span>
    </div>
    <div class="shadow" style="padding: 20px;">
      <!-- <div style="display:flex"> -->
        <!-- <div class="tableDivTitle">
          <span>空气质量</span>
        </div> -->
        <!-- <div class="titleSelct">
          <el-select v-model="airPark" placeholder="请选择园区" size="small" class="w180" @change="airChangePark">
            <el-option v-for="item in parkOptions" :key="item.code" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </div> -->
      <!-- </div> -->
      <div class="titleDiv">
        <!-- <div class="localCity">
          <span>浙江省</span>
        </div> -->
        <div style="display: flex;float: left;">
          <el-button :type="airDiv === 'year' ? 'primary' : ''" size="small" @click="airChange('year')" style="width: 68px;">年度</el-button>
          <el-button :type="airDiv === 'quarter' ? 'primary' : ''" size="small" @click="airChange('quarter')" style="width: 68px;">季度</el-button>
          <el-button :type="airDiv === 'month' ? 'primary' : ''" size="small" @click="airChange('month')" style="width: 68px;">月度</el-button>
          <!-- <div class="changeTable" @click="airChange('year')" :class="airDiv==='year'?'divActice':''"><span class="mouseOver">年度</span></div>
          <div class="changeTable" @click="airChange('quarter')" :class="airDiv==='quarter'?'divActice':''" style="margin-left:20px;"><span class="mouseOver">季度</span></div>
          <div class="changeTable" @click="airChange('month')" :class="airDiv==='month'?'divActice':''" style="margin-left:20px;"><span class="mouseOver">月度</span></div>
          <div class="changeTable" @click="airChange('day')" :class="airDiv==='day'?'divActice':''" style="margin-left:20px;"><span class="mouseOver">日</span></div> -->
        </div>

        <div class="timeSelect" style="width: 200px">
          <el-date-picker
            v-model="airDate"
            @change="airChangeYear"
            size="small"
            :format="airDatePickerParam.format"
            value-format="yyyy-MM-dd"
            :type="airDatePickerParam.type"
            placeholder="选择日期"
            style="width:180px;float:left;"
            :clearable="false"
            :picker-options="pickerOption"
            v-show="airDiv === 'year' || airDiv === 'month'"
            :editable="false"
            popper-class="report-data-picker-top">
          </el-date-picker>
          <quarter :defaultValue="airDate" :getValue="getAirQuarter" v-show="airDiv === 'quarter'"></quarter>
        </div>
        <el-select v-model="airParameter" placeholder="请选择空气指标" size="small" class="w180" @change="airParameterChange" style="float: left;">
          <el-option v-for="item in airOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <!-- <div class="btnDiv">
          <el-button type="primary" size="small" @click="airDataDownload()">导出</el-button>
          <el-button plain size="small" @click="airChangePage()">更多</el-button>
          <el-button plain size="small" @click="airShowChange()">同环比</el-button>
        </div> -->
      </div>
      <div style="width: 100%;margin-top: 20px">
        <!-- <el-table :data="tableData2"  :height="311" :header-cell-class-name="tableHeadClassName"  class="table_sty">
          <el-table-column label="排名" width="80" align="center">
            <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="park" show-overflow-tooltip align="center" label="园区" min-width="120" ></el-table-column>
          <el-table-column prop="AQI" show-overflow-tooltip align="center" label="AQI" ></el-table-column>
          <el-table-column prop="excellentDays" show-overflow-tooltip align="center" label="优良天数" ></el-table-column>
          <el-table-column prop="heavyPollution" show-overflow-tooltip align="center" label="重污染天数" min-width="90"></el-table-column>
          <el-table-column prop="PM25" show-overflow-tooltip align="center" label="PM2.5" ></el-table-column>
          <el-table-column prop="O3" show-overflow-tooltip align="center" label="O3" ></el-table-column>
          <el-table-column prop="CO" show-overflow-tooltip align="center" label="CO" ></el-table-column>
          <el-table-column prop="SO2" show-overflow-tooltip align="center" label="SO2" ></el-table-column>
          <el-table-column prop="NO2" show-overflow-tooltip align="center" label="NO2" ></el-table-column>
          <el-table-column prop="yoy" show-overflow-tooltip align="center" label="同比" v-if="airShow"></el-table-column>
          <el-table-column prop="mom" show-overflow-tooltip align="center" label="环比" v-if="airShow"></el-table-column>
        </el-table> -->
        <div style="margin: 15px 0px 15px 32px;font-size: 16px;font-weight: 500;color: #333333;line-height: 22px;">
          {{airParamName}}：{{airComputed}}
        </div>
        <div id="annular1" ref="annular1" style="width: 100%;height: 270px"></div>
      </div>
    </div>
    <!-- 水质检测 -->
    <div style="width:100%;margin: 30px 0px 20px 0px">
      <span style="font-size: 20px;font-weight: 500;color: #333333;line-height: 28px;">水质监测</span>
    </div>
    <div class="shadow" style="padding: 20px;margin-top:20px;">
      <!-- <div style="display:flex;">
        <div class="tableDivTitle">
          <span>水质监测</span>
        </div>
        <div class="titleSelct">
          <el-select v-model="waterPark" size="small" placeholder="请选择园区" class="w180" @change="waterChangePark">
            <el-option v-for="item in parkOptions" :key="item.code" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </div>
      </div> -->
      <div class="titleDiv">
        <!-- <div class="localCity">
          <span>浙江省</span>
        </div> -->
        <div style="display: flex;float: left;">
          <el-button :type="waterDiv === 'year' ? 'primary' : ''" size="small" @click="waterChange('year')" style="width: 68px;">年度</el-button>
          <el-button :type="waterDiv === 'quarter' ? 'primary' : ''" size="small" @click="waterChange('quarter')" style="width: 68px;">季度</el-button>
          <el-button :type="waterDiv === 'month' ? 'primary' : ''" size="small" @click="waterChange('month')" style="width: 68px;">月度</el-button>
          <!-- <div class="changeTable" @click="waterChange('year')" :class="waterDiv==='year'?'divActice':''"><span class="mouseOver">年度</span></div>
          <div class="changeTable" @click="waterChange('quarter')" :class="waterDiv==='quarter'?'divActice':''" style="margin-left:20px;"><span class="mouseOver">季度</span></div>
          <div class="changeTable" @click="waterChange('month')" :class="waterDiv==='month'?'divActice':''" style="margin-left:20px;"><span class="mouseOver">月度</span></div>
          <div class="changeTable" @click="waterChange('day')" :class="waterDiv==='day'?'divActice':''" style="margin-left:20px;"><span class="mouseOver">日</span></div> -->
        </div>
        <div class="timeSelect" style="width: 200px">
          <el-date-picker
            v-model="waterDate"
            @change="waterChangeYear"
            size="small"
            :format="waterDatePickerParam.format"
            value-format="yyyy-MM-dd"
            :type="waterDatePickerParam.type"
            placeholder="选择日期"
            style="width:180px;float:left;"
            :clearable="false"
            :picker-options="pickerOption"
            v-show="waterDiv === 'year' || waterDiv === 'month'"
            :editable="false"
            popper-class="report-data-picker-top">
          </el-date-picker>
          <quarter :defaultValue="waterDate" :getValue="getWaterQuarter" v-show="waterDiv === 'quarter'"></quarter>
        </div>
        <el-select v-model="waterParameter" placeholder="请选择水质指标" size="small" class="w180" @change="waterParameterChange" style="float: left;">
          <el-option v-for="item in waterOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <!-- <div class="btnDiv">
          <el-button type="primary" size="small" @click="waterDataDownload()">导出</el-button>
          <el-button plain size="small" @click="waterChangePage()">更多</el-button>
        </div> -->
      </div>
      <div style="width: 100%;margin-top: 20px">
        <!-- <el-table :data="tableData3"  :height="311" :header-cell-class-name="tableHeadClassName" class="table_sty">
          <el-table-column label="排名" width="80" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="park" show-overflow-tooltip align="center" label="园区" min-width="120" width="150"></el-table-column>
          <el-table-column prop="waterTemperature" show-overflow-tooltip align="center" label="水温" ></el-table-column>
          <el-table-column prop="pH" show-overflow-tooltip align="center" label="pH" ></el-table-column>
          <el-table-column prop="dissolvedOxygen" show-overflow-tooltip align="center" label="溶解氧" ></el-table-column>
          <el-table-column prop="PermanganateIndex" show-overflow-tooltip align="center" label="高锰酸盐指数" ></el-table-column>
          <el-table-column prop="chemicalOxygenDemand" show-overflow-tooltip align="center" label="化学需氧量" ></el-table-column>
          <el-table-column prop="BOD5" show-overflow-tooltip align="center" label="BOD5" ></el-table-column>
          <el-table-column prop="ammoniaNitrogen" show-overflow-tooltip align="center" label="氨氮" ></el-table-column>
          <el-table-column prop="totalAzote" show-overflow-tooltip align="center" label="总氨" ></el-table-column>
          <el-table-column prop="totalPhosphorus" show-overflow-tooltip align="center" label="总磷" ></el-table-column>
          <el-table-column prop="yoy" show-overflow-tooltip align="center" label="同比" v-if="waterShow"></el-table-column>
          <el-table-column prop="mom" show-overflow-tooltip align="center" label="环比" v-if="waterShow"></el-table-column>
        </el-table> -->
        <div style="margin: 15px 0px 15px 32px;font-size: 16px;font-weight: 500;color: #333333;line-height: 22px;">
          {{waterParamName}}：{{waterComputed}}
        </div>
        <div id="annular2" ref="annular2" style="width: 100%;height: 270px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import quarter from '@/components/quarter'
import parklist from '@/components/parklist'
const echarts = require('echarts')
export default {
  name: 'environmental',
  components: {
    quarter,
    parklist
  },
  data () {
    return {
      carbonDatePickerParam: {
        format: 'yyyy-MM-dd',
        type: 'date',
        placeholder: '选择日'
      },
      airDatePickerParam: {
        format: 'yyyy',
        type: 'year'
      },
      waterDatePickerParam: {
        format: 'yyyy',
        type: 'year'
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      airOptions: [],
      waterOptions: [],
      loading: {
        treeLoading: false,
        tableLoading: false
      },
      searchParams: {
        dateWindow: '',
        searchDate: '',
        parkCode: ''
      },
      options: [
        { label: '日', value: '0' },
        { label: '月', value: '1' },
        { label: '年', value: '2' }
      ],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableColumList: [],
      parkOptions: [],
      airDate: '',
      waterDate: '',
      waterDiv: 'year',
      airDiv: 'year',
      airParameter: 'aqi100',
      waterParameter: 'temperature',
      airParamName: '',
      waterParamName: '',
      airComputed: '',
      waterComputed: '',
      // airPark: '',
      // waterPark: '',
      // waterPage: 1,
      // airPage: 1,
      // airShow: false,
      // waterShow: false,
      // limit: 10,
      pickerOption: {
        disabledDate (time) {
          return time.getTime() > new Date().getTime()
        }
      },
      myChart1: {},
      myChart2: {},
      option1: {},
      option2: {},
      option1XData: [],
      option1Data: [],
      option2XData: [],
      option2Data: []
    }
  },
  mounted () {
    this.initDate()
    this.renderMyChart1()
    this.renderMyChart2()
    this.selectAirCombobox()
    this.selectWaterCombobox()
    // this.selectParkTreeList()
    // this.selectParkAll()
    this.parkChange(this.$route.query.data)
    window.onresize = () => {
      this.myChart1.resize()
      this.myChart2.resize()
    }
  },
  methods: {
    parkChange (parkCode) {
      this.searchParams.parkCode = parkCode
      this.selectAirQualityCount()
      this.selectWaterQualityCount()
      this.selectCarbonList()
      // this.selectAirQualityPage()
      // this.selectWaterQualityPage()
    },
    getAirQuarter (quarter) {
      this.airDate = quarter
      this.selectAirQualityCount()
    },
    getWaterQuarter (quarter) {
      this.waterDate = quarter
      this.selectWaterQualityCount()
    },
    renderMyChart1 () {
      this.myChart1 = echarts.init(document.getElementById('annular1'))
      this.option1 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: '0px',
          left: '30px',
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.option1XData,
            axisLabel: {
              interval: 0,
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            stack: 'total',
            barMaxWidth: 40,
            emphasis: {
              focus: 'series'
            },
            data: this.option1Data
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.myChart1.setOption(this.option1)
    },
    renderMyChart2 () {
      this.myChart2 = echarts.init(document.getElementById('annular2'))
      this.option2 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: '0px',
          left: '30px',
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.option2XData,
            axisLabel: {
              interval: 0,
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            stack: 'total',
            barMaxWidth: 40,
            emphasis: {
              focus: 'series'
            },
            data: this.option2Data
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.myChart2.setOption(this.option2)
    },
    // 空气质量下拉列表
    selectAirCombobox () {
      this.$http.get(`/home/chemical/parkAirQuality/selectAirCombobox`,
        {}
      ).then(({ data: res }) => {
        if (res && res.code === 0) {
          let data = res.data
          this.airOptions = res.data
          this.airParameter = data[0].value
          if (data[0].label === '优良天数') {
            this.airParamName = '优良总天数'
          } else if (data[0].label === '重污染天数') {
            this.airParamName = '重污染总天数'
          } else {
            this.airParamName = data[0].label + '平均值'
          }
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 水质监测下拉列表
    selectWaterCombobox () {
      this.$http.get(`/home/chemical/parkWaterQuality/selectWaterCombobox`,
        {}
      ).then(({ data: res }) => {
        if (res && res.code === 0) {
          let data = res.data
          this.waterOptions = res.data
          this.waterParameter = data[0].value
          this.waterParamName = data[0].label + '平均值'
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 碳排放左侧园区树
    // selectParkTreeList () {
    //   this.$http.get(`/home/chemical/parkInfo/selectParkTreeList`,
    //     {}
    //   ).then(({ data: res }) => {
    //     if (res && res.code === 0) {
    //       let data = res.data
    //       data[0].code = ''
    //       this.treeData = data
    //       this.searchParams.parkCode = data[0].code
    //       this.selectCarbonList()
    //     } else {
    //       this.$message.warning(res.msg)
    //     }
    //   })
    // },
    // 碳排放管理列表
    selectCarbonList () {
      this.$http.post(`/home/chemical/emsGovCarbonStats/selectCarbonList`,
        {
          searchDate: this.searchParams.searchDate,
          dateWindow: this.searchParams.dateWindow,
          parkCode: this.searchParams.parkCode
        }
      ).then(({ data: res }) => {
        if (res && res.code === 0) {
          let carbonTitleArr = []
          let carbonListArr = []
          let carbonNo = 1
          let dayLists = []
          res.data.forEach((item) => {
            let titleIndex = carbonTitleArr.indexOf(item.group)
            if (titleIndex > -1) {
              carbonNo = carbonNo + 1
              carbonListArr.push(
                {
                  no: carbonNo.toString(),
                  name: item.name,
                  monthSum: item.monthValue,
                  yearSum: item.yearValue,
                  dayList: item.emsGovCarbonDetailVoList.map(item => {
                    return item.value.toString()
                  })
                }
              )
            } else {
              carbonNo = 1
              carbonTitleArr.push(item.group)
              carbonListArr.push(
                {
                  group: item.group,
                  title: carbonListArr.length + 1,
                  no: item.group,
                  dayList: []
                }
              )
              carbonListArr.push(
                {
                  no: '1',
                  name: item.name,
                  monthSum: item.monthValue,
                  yearSum: item.yearValue,
                  dayList: item.emsGovCarbonDetailVoList.map(item => {
                    return item.value.toString()
                  })
                }
              )
              dayLists = item.emsGovCarbonDetailVoList.map(item => {
                return item.queryDate.toString()
              })
            }
          })
          // let set = new Set()
          // dayLists.forEach((item) => {
          //   set.add(item)
          // })
          // this.tableColumList = set
          this.tableColumList = dayLists
          this.tableData1 = carbonListArr
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 园区下拉列表
    // selectParkAll () {
    //   this.$http.get(`/home/chemical/parkInfo/selectParkAll`,
    //     {}
    //   ).then(({ data: res }) => {
    //     if (res && res.code === 0) {
    //       this.parkOptions = res.data
    //       this.parkOptions.unshift({
    //         code: '',
    //         label: '',
    //         name: ''
    //       })
    //       this.selectAirQualityPage()
    //       this.selectWaterQualityPage()
    //     } else {
    //       this.$message.warning(res.msg)
    //     }
    //   })
    // },
    // 空气质量
    // selectAirQualityPage () {
    //   this.$http.post(`/home/chemical/parkAirQuality/selectAirQualityPage`,
    //     {
    //       page: this.airPage,
    //       limit: this.limit,
    //       airSearchType: this.airDiv,
    //       searchDate: this.airDate
    //     }
    //   ).then(({ data: res }) => {
    //     if (res && res.code === 0) {
    //       let arr = []
    //       let that = this
    //       res.data.data.forEach(item => {
    //         if (that.airPark === '' || item.parkName === that.airPark) {
    //           arr.push(
    //             {
    //               park: item.parkName,
    //               AQI: item.aqi.toString(),
    //               excellentDays: item.excellentDays.toString(),
    //               heavyPollution: item.heavyPollutionDays.toString(),
    //               PM25: item.pm25.toString(),
    //               O3: item.o3.toString(),
    //               CO: item.co.toString(),
    //               SO2: item.so2.toString(),
    //               NO2: item.no2.toString(),
    //               yoy: item.yoy.toString(),
    //               mom: item.mom.toString()
    //             }
    //           )
    //         }
    //       })
    //       this.tableData2 = arr
    //     } else {
    //       this.$message.warning(res.msg)
    //     }
    //   })
    // },
    // 空气质量echarts
    selectAirQualityCount () {
      this.$http.post(`/home/chemical/parkAirQuality/selectAirQualityCount`,
        {
          airColumn: this.airParameter,
          airSearchType: this.airDiv,
          searchDate: this.airDate,
          parkCode: this.searchParams.parkCode
        }
      ).then(({ data: res }) => {
        if (res && res.code === 0) {
          this.option1XData = res.data.dateList
          let yAxis = []
          let series = []
          let dateArr = []
          let sum = 0
          let parkMap = res.data.parkMap
          for (var parkName in parkMap) {
            yAxis.push(
              {
                type: 'value',
                min: 0
              }
            )
            series.push(
              {
                name: parkName,
                type: 'bar',
                barMaxWidth: 40,
                emphasis: {
                  focus: 'series'
                },
                data: parkMap[parkName]
              }
            )
            // 计算总和
            let parkData = parkMap[parkName]
            parkData.forEach((value, index) => {
              if (value !== 0) {
                if (dateArr.indexOf(index) === -1) {
                  dateArr.push(index)
                }
                sum += value
              }
            })
          }
          if (dateArr.length !== 0) {
            if (this.airParamName === '优良总天数' || this.airParamName === '重污染总天数') {
              this.airComputed = sum
            } else {
              this.airComputed = (sum / dateArr.length).toFixed(2)
            }
          } else {
            this.airComputed = 0
          }
          this.option1.xAxis[0].data = this.option1XData
          this.option1.yAxis = yAxis
          this.option1.series = series
          this.myChart1.setOption(this.option1, true)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 水质监测echarts
    selectWaterQualityCount () {
      this.$http.post(`/home/chemical/parkWaterQuality/selectWaterQualityCount`,
        {
          waterColumn: this.waterParameter,
          waterSearchType: this.waterDiv,
          searchDate: this.waterDate,
          parkCode: this.searchParams.parkCode
        }
      ).then(({ data: res }) => {
        if (res && res.code === 0) {
          this.option2XData = res.data.dateList
          let yAxis = []
          let series = []
          let dateArr = []
          let sum = 0
          let parkMap = res.data.parkMap
          for (var parkName in parkMap) {
            yAxis.push(
              {
                type: 'value',
                min: 0
              }
            )
            series.push(
              {
                name: parkName,
                type: 'bar',
                barMaxWidth: 40,
                emphasis: {
                  focus: 'series'
                },
                data: parkMap[parkName]
              }
            )
            // 计算总和
            let parkData = parkMap[parkName]
            parkData.forEach((value, index) => {
              if (value !== 0) {
                if (dateArr.indexOf(index) === -1) {
                  dateArr.push(index)
                }
                sum += value
              }
            })
          }
          if (dateArr.length !== 0) {
            this.waterComputed = (sum / dateArr.length).toFixed(2)
          } else {
            this.waterComputed = 0
          }
          this.option2.xAxis[0].data = this.option2XData
          this.option2.yAxis = yAxis
          this.option2.series = series
          this.myChart2.setOption(this.option2, true)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 水质监测
    // selectWaterQualityPage () {
    //   this.$http.post(`/home/chemical/parkWaterQuality/selectWaterQualityPage`,
    //     {
    //       page: this.waterPage,
    //       limit: this.limit,
    //       waterSearchType: this.waterDiv,
    //       searchDate: this.waterDate,
    //       parkCode: this.searchParams.parkCode
    //     }
    //   ).then(({ data: res }) => {
    //     if (res && res.code === 0) {
    //       let arr = []
    //       res.data.data.forEach(item => {
    //         if (this.waterPark === '' || item.parkName === this.waterPark) {
    //           arr.push(
    //             {
    //               park: item.parkName,
    //               waterTemperature: item.temperature,
    //               pH: item.ph,
    //               dissolvedOxygen: item.dissolvedOxygen,
    //               PermanganateIndex: item.permanganate,
    //               chemicalOxygenDemand: item.cod,
    //               BOD5: item.bod5,
    //               ammoniaNitrogen: item.ammonian,
    //               totalAzote: item.totalAzote,
    //               totalPhosphorus: item.totalPhosphorus
    //             }
    //           )
    //         }
    //       })
    //       this.tableData3 = arr
    //     } else {
    //       this.$message.warning(res.msg)
    //     }
    //   })
    // },
    // 初始化搜索类型、时间
    initDate () {
      var day1 = new Date()
      this.airDate = day1.getFullYear() + '-' + (day1.getMonth() + 1) + '-' + day1.getDate()
      this.waterDate = day1.getFullYear() + '-' + (day1.getMonth() + 1) + '-' + day1.getDate()
      // day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
      this.searchParams.searchDate = day1.getFullYear() + '-' + (day1.getMonth() + 1) + '-' + day1.getDate()
      this.searchParams.dateWindow = '0'
    },
    // Tree节点点击事件
    // handleNodeClick (data) {
    //   this.searchParams.parkCode = data.code
    //   if (this.searchParams.searchDate && this.searchParams.searchDate !== '') {
    //     this.selectCarbonList()
    //   }
    // },
    // 搜索
    searchAction () {
      this.selectCarbonList()
    },
    // 切换碳排放时间窗口
    changeCarbonType (dateWindow) {
      this.searchParams.dateWindow = dateWindow
      if (dateWindow === '0') {
        this.carbonDatePickerParam.format = 'yyyy-MM-dd'
        this.carbonDatePickerParam.type = 'date'
        this.carbonDatePickerParam.placeholder = '选择日'
      } else if (dateWindow === '1') {
        this.carbonDatePickerParam.format = 'yyyy-MM'
        this.carbonDatePickerParam.type = 'month'
        this.carbonDatePickerParam.placeholder = '选择月'
      } else if (dateWindow === '2') {
        this.carbonDatePickerParam.format = 'yyyy'
        this.carbonDatePickerParam.type = 'year'
        this.carbonDatePickerParam.placeholder = '选择年'
      }
      this.$forceUpdate()
      this.selectCarbonList()
    },
    // 合并分组栏
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (row.title) {
        if (columnIndex === 0) {
          return [1, this.tableColumList.length + 3]
        }
      }
    },
    // table1数据改造
    // getListFromMap (list, arrKey) {
    //   var map = {}
    //   var resultList = []
    //   for (var index in list) {
    //     var arrTem = []
    //     if (map[list[index][arrKey]]) {
    //       arrTem = map[list[index][arrKey]]
    //       arrTem.push(list[index])
    //       map[list[index][arrKey]] = arrTem
    //     } else {
    //       arrTem = []
    //       arrTem.push(list[index])
    //       map[list[index][arrKey]] = arrTem
    //     }
    //   }
    //   for (var key in map) {
    //     var listtem = map[key]
    //     var mapTem = {}
    //     mapTem['no'] = key
    //     mapTem['title'] = 1
    //     resultList.push(mapTem)
    //     for (let i in map[key]) {
    //       map[key][i].no = Number(i) + 1
    //     }
    //     for (var inde in listtem) {
    //       resultList.push(listtem[inde])
    //     }
    //   }
    //   return resultList
    // },
    // 修改分组栏样式
    tableRowClassName ({ row, rowIndex }) {
      if (row.title) {
        return 'table_title'
      }
    },
    // 表头样式
    tableHeadClassName ({ row, rowIndex }) {
      return 'table_head'
    },
    // 空气质量时间维度切换
    airChange (param) {
      this.airDiv = param
      if (param === 'month') {
        this.airDatePickerParam.format = 'yyyy-MM'
        this.airDatePickerParam.type = 'month'
      } else if (param === 'year') {
        this.airDatePickerParam.format = 'yyyy'
        this.airDatePickerParam.type = 'year'
      }
      this.$forceUpdate()
      this.selectAirQualityCount()
    },
    // 水质监测时间维度切换
    waterChange (param) {
      this.waterDiv = param
      if (param === 'month') {
        this.waterDatePickerParam.format = 'yyyy-MM'
        this.waterDatePickerParam.type = 'month'
      } else if (param === 'year') {
        this.waterDatePickerParam.format = 'yyyy'
        this.waterDatePickerParam.type = 'year'
      }
      this.$forceUpdate()
      this.selectWaterQualityCount()
    },
    // 空气质量指标切换
    airParameterChange () {
      let arr = this.airOptions.filter((item) => {
        return item.value === this.airParameter
      })
      if (arr[0].label === '优良天数') {
        this.airParamName = '优良总天数'
      } else if (arr[0].label === '重污染天数') {
        this.airParamName = '重污染总天数'
      } else {
        this.airParamName = arr[0].label + '平均值'
      }
      this.selectAirQualityCount()
    },
    // 水质监测指标切换
    waterParameterChange () {
      let arr = this.waterOptions.filter((item) => {
        return item.value === this.waterParameter
      })
      this.waterParamName = arr[0].label + '平均值'
      this.selectWaterQualityCount()
    },
    // 空气质量查询日期切换
    airChangeYear () {
      this.selectAirQualityCount()
    },
    // 水质监测查询日期切换
    waterChangeYear () {
      this.selectWaterQualityCount()
    }
    // 空气质量同环比显示切换
    // airShowChange () {
    //   this.airShow = !this.airShow
    // },
    // 空气质量园区切换
    // airChangePark () {
    //   this.airPage = 1
    //   this.selectAirQualityPage()
    // },
    // 水质监测园区切换
    // waterChangePark () {
    //   this.waterPage = 1
    //   this.selectWaterQualityPage()
    // },
    // 空气质量更多
    // airChangePage () {
    //   this.airPage = this.airPage + 1
    //   this.$http.post(`/home/chemical/parkAirQuality/selectAirQualityPage`,
    //     {
    //       page: this.airPage,
    //       limit: this.limit,
    //       airSearchType: this.airDiv,
    //       searchDate: this.airDate
    //     }
    //   ).then(({ data: res }) => {
    //     if (res && res.code === 0) {
    //       let that = this
    //       res.data.data.forEach(item => {
    //         if (that.airPark === '' || item.parkName === that.airPark) {
    //           this.tableData2.push(
    //             {
    //               park: item.parkName,
    //               AQI: item.aqi.toString(),
    //               excellentDays: item.excellentDays.toString(),
    //               heavyPollution: item.heavyPollutionDays.toString(),
    //               PM25: item.pm25.toString(),
    //               O3: item.o3.toString(),
    //               CO: item.co.toString(),
    //               SO2: item.so2.toString(),
    //               NO2: item.no2.toString(),
    //               yoy: item.yoy.toString(),
    //               mom: item.mom.toString()
    //             }
    //           )
    //         }
    //       })
    //     } else {
    //       this.$message.warning(res.msg)
    //     }
    //   })
    // },
    // 水质监测更多
    // waterChangePage () {
    //   this.waterPage = this.waterPage + 1
    //   this.$http.post(`/home/chemical/parkWaterQuality/selectWaterQualityPage`,
    //     {
    //       page: this.waterPage,
    //       limit: this.limit,
    //       waterSearchType: this.waterDiv,
    //       searchDate: this.waterDate
    //     }
    //   ).then(({ data: res }) => {
    //     if (res && res.code === 0) {
    //       res.data.data.forEach(item => {
    //         if (this.waterPark === '' || item.parkName === this.waterPark) {
    //           this.tableData3.push(
    //             {
    //               park: item.parkName,
    //               waterTemperature: item.temperature,
    //               pH: item.ph,
    //               dissolvedOxygen: item.dissolvedOxygen,
    //               PermanganateIndex: item.permanganate,
    //               chemicalOxygenDemand: item.cod,
    //               BOD5: item.bod5,
    //               ammoniaNitrogen: item.ammonian,
    //               totalAzote: item.totalAzote,
    //               totalPhosphorus: item.totalPhosphorus
    //             }
    //           )
    //         }
    //       })
    //     } else {
    //       this.$message.warning(res.msg)
    //     }
    //   })
    // },
    // 空气质量导出
    // airDataDownload () {
    //   let exportURL = '/home/chemical/parkAirQuality/exportPDF'
    //   let params = 'airSearchType=' + this.airDiv + '&searchDate=' + this.airDate
    //   window.location.href = `${window.SITE_CONFIG['apiURL']}${exportURL}?${params}`
    // },
    // 水质监测导出
    // waterDataDownload () {
    //   let exportURL = '/home/chemical/parkWaterQuality/exportPDF'
    //   let params = 'waterSearchType=' + this.waterDiv + '&searchDate=' + this.waterDate
    //   window.location.href = `${window.SITE_CONFIG['apiURL']}${exportURL}?${params}`
    // }
  }
}
</script>

<style lang="scss" scoped>
.environmental {
    padding: 20px;
    .w106 {
        width: 130px;
    }
    .w180 {
        width: 180px;
    }
    .tree_title {
      font-size: 16px;
      font-weight: 400;
      padding: 10px 0px;
      padding-left: 25px;
      height:40px;
    }
    .leftTree {
        width: 256px;
    }
    .shadow {
        background: #FFFFFF;
        border: 1px solid #F0F0F0;
        box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.03);
    }
    .tree_sty {
        width: 100%;
        height: 312px;
        overflow-y: auto;
    }
    .rightTable {
        margin-left: 0px;
    }
    /deep/ .el-table .table_title {
        text-align: left;
        font-size: 14px;
        color: #b1b1b1;
        font-weight: 800;
    }
    /deep/ .el-table .table_title .cell {
        text-align: left;
    }
    /deep/ .el-table .table_head {
        background-color: #f7f8fa;
    }
    .titleSelct {
      margin-left: 20px;
    }
    .rightTable {
      width: 100%;
    }
    // .tableDiv {
    //     width: 1158px;
    // }
    .table_sty {
        width: 100%;
        overflow-y: auto;
    }
    .searchDay {
        margin-right: 10px;
        margin-left: 25px;
    }
    .titleDiv {
        // display: flex;
        // margin-top: 20px;
        height: 34px;
        line-height: 34px;
        text-align: center;
    }
    .localCity{
        width: 72px;
        height: 34px;
        background: #1C60AD;
        color: #ffffff;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        float: left;
    }
    .changeTable {
        height: 34px;
    }
    .timeSelect {
        margin-left: 20px;
        width: 180px;
        height: 40px;
        float: left;
    }
    .btnDiv {
        height: 34px;
        margin-left: 30px;
        display: flex;
        float: right;
    }
    .mouseOver {
        cursor: pointer;
        font-size: 15px;
        font-weight: 400;
    }
    .divActice {
        border-bottom: 4px solid #409eff;
        color: #409eff;
    }
    .tableDivTitle {
      font-size: 16px;
      font-weight: 400;
      line-height: 32px;
    }
    /deep/ .report-data-picker-top {
        position: absolute;
        z-index: 2018;
    }
    .el-table /deep/ .el-table__body-wrapper {
      height: 303px !important;
    }
}
</style>
